<template>
  <view class="tab-bar">
    <view class="tab-bar-item" @click="onJump(index)" v-for="(item, index) of tabbars">
      <view class="text">{{ item.text }}</view>
      <view class="icon"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { watchEffect, ref } from 'vue';


const tabbars: any = [
  { text: "首页", pagePath: "/pages/Home/index" },
  { text: "详情页", pagePath: "/pages/Detail/index" },
];

const curIdx: any = ref(uni.getStorageSync('tabbarIndex') || 0) as any;

watchEffect(() => {
  const { pagePath } = tabbars[curIdx.value];
    // 跳转到 tabBar 页面的路径
    uni.switchTab({ url: pagePath });
})

const onJump = (index: any = 0) => {
  //  缓存当前的 tabbar 的索引 - 便于刷新 - 保留刷新之后的位置
  uni.setStorageSync('tabbarIndex', index);
  curIdx.value = index;
}
</script>

<style lang="scss" scoped>
.tab-bar {
  display: flex;
  height: 100px;

  .tab-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
